<script setup name="Home">
import {onMounted, reactive, ref, watch} from "vue";
import {Check, Delete, Edit, Plus, Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import Pagination from "@/components/Pagination.vue";
import Dialog from "@/components/Dialog.vue";
import noticeHttp from "@/api/noticeHttp.js";

const dialogTitle = ref('')
const input = ref('')

const form = reactive({
  id: 0,
  content: '',
  status: '',
  publish_time: '',
})

const tableData = ref([])

const onAddTodo = () => {
  form.content = ''
  form.status = ''
  form.publish_time = ''
  dialogTitle.value = '添加公告'
  dialogVisible.value = true
}

const dialogVisible = ref(false)
const formLabelWidth = '70px'


const onEditNotice = (dialogForm) => {
  dialogTitle.value = '编辑公告'
  dialogVisible.value = true
  form.id = dialogForm.id
  form.content = dialogForm.content
  form.publish_time = dialogForm.publish_time
  form.status = dialogForm.status
}


const onSubmitForm = async () => {
  if (form.id === 0) {
    try {
      const result = await noticeHttp.postNotice(form)
      console.log(result)
      ElMessage.success(result.msg)
    } catch (detail) {

    }
  } else {
    const result = await noticeHttp.updateNotice(form.id, form)
    console.log(result)
    ElMessage.success(result.msg)
  }
  await requestNoticeList()
  dialogVisible.value = false
}


const onDeleteNotice = async (id) => {
  try {
    const result = await noticeHttp.deleteNotice(id)
    ElMessage.success(result.msg)
  } catch (detail) {

  }
}


const onPublishNotice = async (id) => {
  const result = await noticeHttp.publishNotice(id)
  ElMessage.success(result.msg)
  await requestNoticeList()
}


const requestNoticeList = async (page) => {
  try {
    let data = await noticeHttp.getNotice(page)
    pagination.total = data.total;
    tableData.value = data.items;
  } catch (detail) {
    ElMessage.error(detail);
  }
};


let pagination = reactive({
  page: 1,
  total: 0,
});


// 监听 input 的变化
watch(input, async (newValue) => {
  console.log(newValue)
  // 筛选出 content 包含输入内容的元素
  if(newValue){
    tableData.value = tableData.value.filter(item =>
      item.content.includes(newValue)
  )
  }else {
   await requestNoticeList()
  }
});

watch(
    () => pagination.page,
    (value) => {
      requestNoticeList(value);
    }
);


onMounted(async () => {
  try {
    await requestNoticeList(1)
  } catch (detail) {

  }
})

</script>
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" @submit="onSubmitForm">
    <el-form :model="form">
      <el-form-item label="公告内容" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.content" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="发布状态" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="选择发布状态" style="width: 40%">
          <el-option label="未发布" :value="0"/>
          <el-option label="已发布" :value="1"/>
          <el-option label="删除" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.publish_time"
            type="datetime"
            placeholder="选择发布时间"
            style="width: 40%"/>
      </el-form-item>
    </el-form>
  </Dialog>
  <div>
    <h1 class="title">NoticeList</h1>
    <div class="title">
      <el-input
          v-model="input"
          style="width: 550px; margin-right: 12px"
          placeholder="Please input"
          clearable
      />
      <el-button type="primary" :icon="Search" plain></el-button>
      <el-button type="success" :icon="Plus" plain @click="onAddTodo"></el-button>
    </div>
    <div class="box-card">
      <el-card shadow="never" class="card">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="30"/>
          <el-table-column prop="id" label="ID" width="50"></el-table-column>
          <el-table-column prop="content" label="内容" width="300"></el-table-column>
          <el-table-column label="发布状态" width="80">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 0 ">未发布</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === 1">已发布</el-tag>
              <el-tag type="danger" v-else>已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="publish_time" label="发布时间" width="170"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="success" :icon="Check" circle @click="onPublishNotice(scope.row.id)"></el-button>
              <el-button type="primary" :icon="Edit" circle @click="onEditNotice(scope.row)"></el-button>
              <el-button type="danger" :icon="Delete" circle @click="onDeleteNotice(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <Pagination v-model="pagination.page" :total="pagination.total"></Pagination>
        </template>
      </el-card>
    </div>
  </div>

</template>

<style scoped>
.title {
  display: flex;
  justify-content: center;
}

.box-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card .card {
  margin-top: 20px;
  width: 820px;
  height: 700px;
  border-radius: 10px;
}


</style>